<template>
  <div ref="getheight" id='mytable1' :style='size'>
    <!--<vxe-table-->
      <!--:style='size'-->
      <!--size="mini"-->
      <!--border-->
      <!--height="100%"-->
      <!--width="100%"-->
      <!--:header-cell-class-name="hclass"-->
      <!--:row-class-name="rowClassName"-->
      <!--:data="tableData">-->
      <!--<vxe-table-column field="bhz" title="变化值"></vxe-table-column>-->
      <!--<vxe-table-column field="fxs" title="阜新市"></vxe-table-column>-->
      <!--<vxe-table-column field="fmx" title="阜蒙县"></vxe-table-column>-->
      <!--<vxe-table-column field="zwx" title="彰武县" show-overflow></vxe-table-column>-->
    <!--</vxe-table>-->
    <table :style='size' border="0" cellspacing="0" cellpadding="0">
       <tr :style="height">
         <th style="color: white;font-size:12px;align:left"><div style="display: flex;justify-content: flex-start">{{tableData[0][0]}}</div></th>
         <th style="color: white;font-size:12px;align:left"><div style="display: flex;justify-content: flex-start">{{tableData[1][0]}}</div></th>
         <th style="color: white;font-size:12px;align:left"><div style="display: flex;justify-content: flex-start">{{tableData[2][0]}}</div></th>
         <th style="color: white;font-size:12px;align:left"><div style="display: flex;justify-content: flex-start">{{tableData[3][0]}}</div></th>
         <th style="color: white;font-size:12px;align:left"><div style="display: flex;justify-content: flex-start">{{tableData[4][0]}}</div></th>
         <th style="color: white;font-size:12px;align:left"><div style="display: flex;justify-content: flex-start">{{tableData[5][0]}}</div></th>
         <th style="color: white;font-size:12px;align:left"><div style="display: flex;justify-content: flex-start">{{tableData[6][0]}}</div></th>
         <th style="color: white;font-size:12px;align:left"><div style="display: flex;justify-content: flex-start">{{tableData[7][0]}}</div></th>
      </tr>
      <tr v-for=" i in 4" :key="i" :style="height">
        <td v-for=" j in 8" :key="j"  style="color: white; font-size:10px;align:left" :style="getstyle(j-1,i)">{{tableData[j-1][i]}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
  export default {
    name: 'mytable1',
    data () {
      return {
        size: {
          width: '100%',
          height: '100%'
        },
        height: {
          width: '100%',
          height: '25%'
        },
        tableData: [
          ['变化值', '阜新市', '阜蒙县', '彰武县'],
          ['生物丰度', '15.104', '18.725', '12.472'],
          ['植被覆盖', '-3.768', '-3.646', '2.138'],
          ['水网密度', '-13.592', '-0.578', '-2.482'],
          ['土地胁迫', '0', '-13.605', '-0.019'],
          ['污染负荷指数', '0.096', '18.725', '0.482'],
          ['ΔEI', '2.019', '5.669', '4.482'],
          ['质量评价', '略有变好', '明显变好', '明显变好']
        ]
      }
    },
    created () {
      this.setHeight()
    },
    computed: {},
    methods: {
      setHeight () {
        //  this.height.height = this.$refs.getheight.offsetHeight / 8 + 'px'
      },
      getstyle (j, i) {
        if (i === 3 && j === 7) {
          return {color: '#00ff00'}
        } else if (i === 2 && j === 7) {
          return {color: '#00ff00'}
        } else if (i === 1 && j === 7) {
          return {color: '#71e4ff'}
        }
        return {}
      }
    }
  }
</script>
<style>
  /*#mytable1 table td,#mytable1 table th{border:1px solid #F00}*/
</style>
